<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>练习</title>
</head>
<body>
<table border="1">
    <caption>个人信息页面</caption>
    <tr>
        <td>名字:</td>
        <td>{{person.name}}</td>
    </tr>
    <tr>
        <td>照片:</td>
        <td><img :src="person.url" style="width: 90px" alt=""> </td>
    </tr>
    <tr>
        <td>年龄:</td>
        <td>{{person.age}}岁</td>
    </tr>
    <tr>
        <td>好友:</td>
        <td>
            <ul>
                <li v-for="name in person.friend">{{name}}</li>
            </ul>
        </td>
    </tr>
    <tr>
        <td>工作:</td>
        <td>{{person.job}}</td>
    </tr>
    <tr>
        <td colspan="2" align="center">
            <input type="button" value="加载数据" @click="f()">
        </td>
    </tr>
</table>
<!--引入vue-->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
    let v = new Vue({
        el:"table",
        data:{person:{}},
        methods:{
            f:function () {
                v.person = {
                    name:"貂蝉",
                        age:16,
                    url:"01.jpg",
                    job:"法师",
                    friend:["蔡文姬","亚瑟","狄仁杰"]
                }
            }
        }
    })
</script>
</body>
</html>